<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品查询</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/goodsManage/css/bootstrap.min.css" >
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/goodsManage/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/goodsManage/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/goodsManage/css/bootstrap-icons.css">
    <script src="/goodsManage/js/jquery.min.js" ></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/goodsManage/js/bootstrap.min.js" ></script>
    <script src="/goodsManage/js/bootstrap-table.min.js" ></script>

</head>
<body>
<div style="width: 95%;margin-left: 30px">
    <table id="table"  class="table table-dark" data-search="true" data-show-columns="true" >
        <thead style="background-color: #5bc0de">
        <tr>
            <th data-field="goods_type">品类</th>
            <th data-field="goods_brand">品牌</th>
            <th data-field="goods_model">型号</th>
            <th data-field="official_price">官旗价</th>
            <th data-field="guide_price">指导价</th>
        </tr>
        </thead>
    </table>
</div>
<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    　　<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
    　　　
    　　　　<h5 id="loadText">加载数据中...</h5>
    　　</div>
</div>

<div class="modal fade" id="errorDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
               查询数据出错
            </div>
        </div>
    </div>
</div>
<script>
    var $table = $('#table');
    showLoading = function (loadText) {
        if(!loadText){
            $("#loadText").html(loadText)
        }
        $('#loadingModal').modal({backdrop: 'static', keyboard: false});
    }
    hideLoading = function () {
        $('#loadingModal').modal('hide');
    }

    $(function() {
        showLoading("加载数据中...")
        $.ajax({
            type: 'post',
            url: 'goods/list',
            contentType: 'application/json;charset=utf-8',
            data: '{"key": ""}',
            success: function (data) { //返回json结果
                hideLoading();
                if(data.code == 200){
                    $table.bootstrapTable({data: data.data});
                }else{
                    $('#errorDialog').modal('show')
                }
            }
        });
    })
</script>
</body>
</html>